<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button text=""></ion-back-button>
        </ion-buttons>
        <ion-title>{{ pageTitle }}</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div>
        <img :src="img" alt="">
      </div>
      <ion-row class="nav">
        <ion-col v-for="(item, index) in navList" :key="index" @click="navChange(index)">
          <label  :class="{'active': index === navIndex}">{{ item }}</label>
        </ion-col>
      </ion-row>
      <div v-if="navIndex === 0" class="box">
        <div class="detail">
          <p class="title">{{ pageTitle }}</p>
          <ion-row>
            <ion-col class="price">¥ <span>457</span></ion-col>
            <ion-col class="desc">已有1931人购买</ion-col>
          </ion-row>
        </div>
        <div class="teacher">
            <div class="title">授课老师</div>
            <div class="teacherlist">
              <div class="list" v-for="(item, index) in teacherList" :key="index" @click="showTeacherInfo(item)">
                <ion-row>
                  <ion-col size="4"> <img :src="item.url" alt=""></ion-col>
                  <ion-col class="info">
                    <ion-icon class="chevronForwardOutline" :icon="chevronForwardOutline"></ion-icon>
                    <div class="name">{{ item.name }}</div>
                    <div class="zw">主讲老师</div>
                  </ion-col>
                </ion-row>
              </div>
            </div>
          </div>
      </div>
      <div v-if="navIndex === 1" class="box">
        <div class="main-page">
          <div class="list" v-for="(item, index) of listData" :key="index" @click="listChange(index)">
              <div class="title">
                  <img :src="require(listIndex === index ? '@/assets/images/up.png' : '@/assets/images/down.png')" alt=""> 
                  {{ item.title }} <span v-if="item.ismian === 1">限免</span> <ion-icon v-else :icon="bagHandleOutline"></ion-icon>
              </div>
              <!-- <ion-icon class="chevronForwardOutline" :icon="chevronForwardOutline"></ion-icon> -->
              <!-- v-if="listIndex === index" -->
              <div v-if="listIndex === index">
                <div class="childlist"  v-for="(item1, index1) of item.children" :key="index1">
                  <div class="title">
                      {{ item1.title }} <span v-if="item1.ismian === 1">限免</span> <ion-icon v-else :icon="bagHandleOutline"></ion-icon>
                  </div>
                  <p>12分42秒  1296人学过</p>
                  <ion-icon class="chevronForwardOutline" :icon="chevronForwardOutline"></ion-icon>
                </div>
              </div>
          </div>
        </div>
      </div>
      <div v-if="navIndex === 2" class="box">
        <div class="detail grad">
          <p class="title">课程评价</p>
          <ion-list  lines="none">
              <ion-item v-for="(item, index) in plList" :key="index">
                  <ion-avatar slot="start" class="avatar txs">
                      <img class="avatar tx" :src="item.tx">
                  </ion-avatar>
                  <ion-label>
                      <p class="filename">{{ item.nickName }}</p>
                      <span>{{item.time}}</span> <span>.</span> <span>{{item.city}}</span>
                      <div class="content">{{item.content}}</div>
                      <ion-row>
                        <ion-col v-for="(child, index) in item.imgList" :key="index" @click="goEnlargeImage($event, index, item.imgList)">
                          <img :src="child" alt="" class="imgs">
                        </ion-col>
                      </ion-row>
                  </ion-label>
              </ion-item>
          </ion-list>
        </div>
      </div>
    </ion-content>
    <ion-footer>
      <ion-row>
        <ion-col><ion-button shape="round"  expand="full" color="light">分享好友</ion-button></ion-col>
        <ion-col><button ion-button block shape="round"  expand="full"  @click="goPay()">加入学习</button></ion-col>
      </ion-row>
    </ion-footer>
  </ion-page>
</template>

<script lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButtons, IonBackButton, IonCol, IonRow, IonIcon, IonFooter, IonButton, IonList, IonItem, IonLabel, IonAvatar, modalController } from '@ionic/vue';
import { useRouter, useRoute } from 'vue-router';
import { reactive, toRefs, onMounted } from 'vue';
import { chevronForwardOutline } from 'ionicons/icons';
import thsEnlargeImage from '@/components/ths-enlarge-image/ths-enlarge-image.vue';
export default {
  name: 'login-page',
  components: {
    IonPage, IonHeader, IonToolbar, IonContent, IonTitle, IonButtons, IonBackButton, IonCol, IonRow, IonIcon, IonFooter, IonButton, IonList, IonItem, IonLabel, IonAvatar
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const state = reactive({
      pageTitle: route.query.title,
      img: route.query.url,
      navList: ['课程介绍', '课程目录', '课程评价'],
      navIndex: 0,
      listIndex: -1,
      plList: [
        {
          tx: require('@/assets/images/filedown.png'),
          nickName: '靠一点点谱',
          time: '2025年4月8日',
          city: '北京',
          star: 5,
          content: '同学们觉得还有什么问题听不明白的话，可以反复观看，跟我微信一对一沟通',
          imgList: [require('@/assets/images/filedown.png'), require('@/assets/images/filedown.png'), require('@/assets/images/filedown.png')]
        },
        {
          tx: require('@/assets/images/filedown.png'),
          nickName: '靠一点点谱',
          time: '2025年4月8日',
          city: '北京',
          star: 5,
          content: '同学们觉得还有什么问题听不明白的话，可以反复观看，跟我微信一对一沟通',
          imgList: [require('@/assets/images/filedown.png'), require('@/assets/images/filedown.png'), require('@/assets/images/filedown.png')]
        }
      ],
      listData: [
        {
            title: '第一章 乐理基础乐理基础',
            total: '20',
            num: 0,
            ismian: 1,
            children: [
                {
                    title: '1.1  乐理基础乐理基础',
                    total: '20',
                    num: 0,
                    ismian: 1,
                },
                {
                    title: '1.1  乐理基础乐理基础',
                    total: '20',
                    num: 0,
                    ismian: 1,
                }
            ],
        },
        {
            title: '第二章 乐理基础乐理基础',
            total: '20',
            num: 0,
            ismian:0,
            children: [
                {
                    title: '1.1  乐理基础乐理基础',
                    total: '20',
                    num: 0,
                    ismian: 0,
                },
                {
                    title: '1.1  乐理基础乐理基础',
                    total: '20',
                    num: 0,
                    ismian: 0,
                }
            ],
        }
      ],
      teacherList: [
        {
          name: '张怼怼',
          url: require('@/assets/images/filedown.png'),
          id: 1
        },
        {
          name: '张怼怼',
          url: require('@/assets/images/filedown.png'),
          id: 1
        },
        {
          name: '张怼怼',
          url: require('@/assets/images/filedown.png'),
          id: 1
        },
        {
          name: '张怼怼',
          url: require('@/assets/images/filedown.png'),
          id: 1
        },
        {
          name: '张怼怼',
          url: require('@/assets/images/filedown.png'),
          id: 1
        }
      ]
    })

    function navChange(index: number){
      if(state.navIndex !== index){
        state.navIndex = index;
      }
    }

    function listChange(index: number){
      if(state.listIndex !== index){
        state.listIndex = index;
      } else {
        state.listIndex = -1;
      }
    }

    /*
    * 跳转至图片预览界面
    */
    async function goEnlargeImage(ev: any, index: any, list: any){ 
        const imgList = list.map((item: any) => {
          return {
            imageSavePath: item
          }
        });
        const modal = await modalController.create({
            component: thsEnlargeImage as any,
            componentProps: {
                pictures: imgList,
                initialSlide: index,
                time: new Date().getTime() + ''
            },
            cssClass: 'enlarge-image-modal'
        });
        await modal.present();

    }

    async function showTeacherInfo(data: any){
      router.push(
        {
          path: '/teacher-info',
          query: {
            ...data
          }
        }
      )
    }

    function goPay(){
      router.push(
        {
          path: '/pay-order',
          query: {
            ...route.query
          }
        }
      )
    }
    
    return {
      ...toRefs(state),
      navChange,
      chevronForwardOutline,
      listChange,
      goEnlargeImage,
      showTeacherInfo,
      goPay
    }
  }
}
</script>
<style lang="scss" scoped>
.nav{
  ion-col{
    text-align: center;
    margin: 10px 0px;
    font-size: 14px;
    position: relative;
    label::before{
      content: '';
      display: inline-block;
      height: 3px;
      width: 30px;
      background: #fff;
      position: absolute;
      bottom: -5px;
      left: 50%;
      margin-left: -15px;
    }
    label.active{
      color: #CA3032;
    }
    label.active::before{
      content: '';
      display: inline-block;
      height: 3px;
      width: 30px;
      background: #CA3032;
      position: absolute;
      bottom: -5px;
      left: 50%;
      margin-left: -15px;
    }
  }
}
.box{
  background: #f4f4f4;
}
.detail{
  padding: 10px;
  background: #fff;
  p{
    margin: 0px;
    font-size: 18px;
    color: #333333;
    font-weight: bold;
  }
  .price{
    color: #CA3032;
    font-size: 14px;
    span{
      font-size: 18px;
    }
  }
  .desc{
    text-align: right;
    font-size: 14px;
    color: #999C9F;
  }
}
.teacher{
  margin-top: 10px;
  padding: 10px;
  background: #fff;
  .title{
    font-size: 14px;
    color: #1E1E1F; 
    font-weight: bold;
    margin-bottom: 10px;
  }
  .teacherlist{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    .list{
      background: #F3F5F7;
      border-radius: 10px;   
      height: 60px;
      img{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-top: 10px;
        margin-left: 5px;
      }
      .info{
        font-size: 14px;
        position: relative;
        ion-icon{
          position: absolute;
          right: 5px;
          top: 23px;
        }
        .name{
          margin-top: 6px;
          margin-bottom: 2px;
        }
        .zw{
          font-size: 10px;
          color: #999C9F; 
        }
      }
    }
  }
}
button {
    width: 100%;
    height: 50px;
    border-radius: 25px;
    color: #fff;
    background: #CA3032;
    font-size: 14px;
    margin-top: 5px;
  }

  .main-page {
    padding: 10px;
    background: #fff;
    .list{
      position: relative;
      margin-top: 10px;
      .chevronForwardOutline{
          position: absolute;
          right: 10px;
          top: 4px;
          color: #999;
        }
      .title{
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        padding-right: 20px;
        margin-bottom: 10px;
        span{
          color: #CA3032;
          font-size: 12px;
          padding: 3px 5px;
          background: rgba(202, 48, 50, 0.1);
          border-radius: 2px;
          margin-left: 5px;
        }
        ion-icon{
          font-size: 16px;
        }
        img{
          width: 20px;
          vertical-align: middle;
          margin-right: 10px;
        }
      }
      p{
        margin: 0px;
        margin-left: 35px;
        font-size: 12px;
        color: #999999;
        margin-bottom: 20px;
      }
      .childlist{
        position: relative;
        .title{
          font-size: 14px;
          padding-left: 35px;
          font-weight: normal;
        }
      }
    }
}

.grad{
    ion-icon{
        position: relative;
        top: 2px;
        
    }
    ion-item {
      position: relative;
    }
    .txs{
      width: 30px;
      height: 30px;
    }
    .tx{
      --border-radius: 50%;
      position: absolute;
      top: 10px;
      width: 30px;
      height: 30px;
    }
    .content{
      font-size: 14px;
      color: #06191C;
      margin-top: 5px;
    }
    .desc{
        font-size: 13px;
        color: #5E6266;
        overflow: hidden;  //超出隐藏
        text-overflow: ellipsis; //文本超出时显示省略号
        white-space: nowrap; //设置文本不换行
    }
    .filename{
        font-weight: bold;
        font-size: 16px;
        color: #1E1E1F;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    span{
        font-size: 12px;
        color: #939699;
    }
    label{
        font-size: 12px;
        color: #fff;
        background: #CA3032;
        padding: 3px 5px;
        margin-right: 5px;
        border-radius: 3px;
    }
    .imgs{
      width: 100%;
      height: 92px;
    }
}
</style>